<template>
  <fo-header></fo-header>
  <section class="wrapper" style="background: #f5f5f5">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xl-4 col-md-6">1</div>
        <div class="col-xl-4 col-md-6">
          <div class="card messages">
            <div class="card-body">
              <h4 class="mt-0 header-title">Latest Messages</h4>
              <nav class="mt-4">
                <div
                  class="nav nav-tabs latest-messages-tabs nav-justified"
                  id="nav-tab"
                  role="tablist"
                >
                  <a
                    class="nav-item nav-link"
                    id="nav-first-tab"
                    data-toggle="tab"
                    href="#nav-first"
                    role="tab"
                    aria-controls="nav-first"
                    aria-selected="false"
                  >
                    <h4 class="mt-0">12</h4>
                    <p class="text-muted mb-0">November</p>
                  </a>
                  <a
                    class="nav-item nav-link active"
                    id="nav-second-tab"
                    data-toggle="tab"
                    href="#nav-second"
                    role="tab"
                    aria-controls="nav-second"
                    aria-selected="true"
                  >
                    <h4 class="mt-0">13</h4>
                    <p class="text-muted mb-0">November</p>
                  </a>
                </div>
              </nav>
              <div class="tab-content" id="nav-tabContent">
                <div
                  class="tab-pane fade"
                  id="nav-first"
                  role="tabpanel"
                  aria-labelledby="nav-first-tab"
                >
                  <div class="p-2 mt-2">
                    <ul class="list-unstyled latest-message-list mb-0">
                      <li class="message-list-item">
                        <a href="#" class="text-dark">
                          <div class="media">
                            <img
                              class="mr-3 thumb-md rounded-circle"
                              src="assets/images/users/avatar-2.jpg"
                              alt=""
                            />
                            <div class="media-body">
                              <h6 class="mt-0">Michael Bowen</h6>
                              <p class="text-muted mb-0">Hey! there I'm available...</p>
                              <p class="time text-muted">Just Now</p>
                            </div>
                          </div>
                        </a>
                      </li>
                      <li class="message-list-item">
                        <a href="#" class="text-dark">
                          <div class="media">
                            <img
                              class="mr-3 thumb-md rounded-circle"
                              src="assets/images/users/avatar-3.jpg"
                              alt=""
                            />
                            <div class="media-body">
                              <h6 class="mt-0">Danny Benson</h6>
                              <p class="text-muted mb-0">
                                I've finished it! See you so...
                              </p>
                              <p class="time text-muted">12 min ago</p>
                            </div>
                          </div>
                        </a>
                      </li>
                      <li class="message-list-item">
                        <a href="#" class="text-dark">
                          <div class="media">
                            <img
                              class="mr-3 thumb-md rounded-circle"
                              src="assets/images/users/avatar-4.jpg"
                              alt=""
                            />
                            <div class="media-body">
                              <h6 class="mt-0">Brady Smith</h6>
                              <p class="text-muted mb-0">This theme is awesome!</p>
                              <p class="time text-muted">23 min ago</p>
                            </div>
                          </div>
                        </a>
                      </li>
                      <li class="message-list-item">
                        <a href="#" class="text-dark">
                          <div class="media">
                            <img
                              class="mr-3 thumb-md rounded-circle"
                              src="assets/images/users/avatar-5.jpg"
                              alt=""
                            />
                            <div class="media-body">
                              <h6 class="mt-0">Danny Benson</h6>
                              <p class="text-muted mb-0">Nice to meet you</p>
                              <p class="time text-muted">34 min ago</p>
                            </div>
                          </div>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="tab-pane fade active show"
                  id="nav-second"
                  role="tabpanel"
                  aria-labelledby="nav-second-tab"
                >
                  <div class="p-2 mt-2">
                    <ul class="list-unstyled latest-message-list mb-0">
                      <li class="message-list-item">
                        <a href="#" class="text-dark">
                          <div class="media">
                            <img
                              class="mr-3 thumb-md rounded-circle"
                              src="assets/images/users/avatar-5.jpg"
                              alt=""
                            />
                            <div class="media-body">
                              <h6 class="mt-0">Albert Jones</h6>
                              <p class="text-muted mb-0">Hey! there I'm available...</p>
                              <p class="time text-muted">yesterday, 09:42am</p>
                            </div>
                          </div>
                        </a>
                      </li>
                      <li class="message-list-item">
                        <a href="#" class="text-dark">
                          <div class="media">
                            <img
                              class="mr-3 thumb-md rounded-circle"
                              src="assets/images/users/avatar-6.jpg"
                              alt=""
                            />
                            <div class="media-body">
                              <h6 class="mt-0">Danny Benson</h6>
                              <p class="text-muted mb-0">
                                I've finished it! See you so...
                              </p>
                              <p class="time text-muted">yesterday, 11:07am</p>
                            </div>
                          </div>
                        </a>
                      </li>
                      <li class="message-list-item">
                        <a href="#" class="text-dark">
                          <div class="media">
                            <img
                              class="mr-3 thumb-md rounded-circle"
                              src="assets/images/users/avatar-7.jpg"
                              alt=""
                            />
                            <div class="media-body">
                              <h6 class="mt-0">Joseph Sanchez</h6>
                              <p class="text-muted mb-0">This theme is awesome!</p>
                              <p class="time text-muted">yesterday, 01:17am</p>
                            </div>
                          </div>
                        </a>
                      </li>
                      <li class="message-list-item">
                        <a href="#" class="text-dark">
                          <div class="media">
                            <img
                              class="mr-3 thumb-md rounded-circle"
                              src="assets/images/users/avatar-5.jpg"
                              alt=""
                            />
                            <div class="media-body">
                              <h6 class="mt-0">Daniel Anderson</h6>
                              <p class="text-muted mb-0">Nice to meet you</p>
                              <p class="time text-muted">34 min ago</p>
                            </div>
                          </div>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-4">
          <div class="card">3</div>
        </div>
      </div>

      <div class="row">
        <div class="col-12">
          <fo-card>
            <h4 class="mb-2 header-title">Latest Transactions</h4>
            <fo-table></fo-table>
          </fo-card>
        </div>
      </div>
    </div>
  </section>
  <fo-footer></fo-footer>
  <fo-loader :visible="false"></fo-loader>
</template>

<script lang="ts">
import { defineComponent, ref, provide, reactive, onMounted } from "vue";
import { ThemeSymbol, ThemeSymbolRef, MittSymbol } from "@/utils/constant";
import mitt, { Emitter } from "mitt";
import GitSvg from "@/components/common/GitSvg.vue";
import FoLoader from "@/components/foxia/FoLoader.vue";
import FoHeader from "@/components/foxia/FoHeader.vue";
import FoFooter from "@/components/foxia/FoFooter.vue";
import FoCard from "@/components/foxia/FoCard.vue";
import FoTable from "@/components/foxia/FoTable.vue";
import ScrollReveal from "scrollreveal";
export default defineComponent({
  name: "App",
  components: {
    [GitSvg.name]: GitSvg,
    [FoLoader.name]: FoLoader,
    [FoHeader.name]: FoHeader,
    [FoFooter.name]: FoFooter,
    [FoCard.name]: FoCard,
    [FoTable.name]: FoTable,
  },
  setup() {
    const emitter: Emitter = mitt();
    provide(ThemeSymbol, "dark");
    provide(ThemeSymbolRef, ref("dark"));
    provide<Emitter>(MittSymbol, emitter);

    onMounted(() => {
      ScrollReveal().reveal(".headline", { interval: 100 });
    });
    /*
    // 顺序是先挂载子组件，因此App组件是在最后挂载的，必定能找到oHeader
    onMounted(() => {
       * 智能显示隐藏导航栏:
       * http://www.ilxtx.com/auto-hide-navbar.html
       * https://boke112.com/post/3476.html
       * [cdn](https://npmcdn.com/headroom.js@0.9.3/dist/headroom.min.js)
      const oHeader = document.querySelector("#nav-headroom-scroll");

      const headroom = new Headroom(oHeader, {
        // 在元素没有固定之前，垂直方向的偏移量（以px为单位）-- 往下滚205px才会触发
        offset: 205,
        // scroll tolerance in px before state changes
        tolerance: 5,
        classes: {
          // 当元素初始化后所设置的class
          initial: "headroom-animated",
          // 向上滚动时设置的class ["slideDown", "swingInX", "flipInX", "bounceInDown"]
          pinned: "slideDown",
          // 向下滚动时所设置的class ["slideUp", "swingOutX", "flipOutX", "bounceOutUp"]
          unpinned: "slideUp",
        },
      });
      headroom.init();

      // to destroy
      // headroom.destroy();
    });
    */
    return {};
  },
});
</script>

<style lang="less">
.custom-scrollbar::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}
.custom-scrollbar::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
.header-title {
  margin-bottom: 8px;
    letter-spacing: 0.02em;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
        line-height: 22px;
}
</style>
